<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="操作人员" label-width="70px" prop="source">
                <el-input clearable v-model="formInline.username" placeholder="请输入操作人姓名"></el-input>
            </el-form-item>
            <el-form-item label="操作类型" label-width="70px" prop="source">
                <el-input clearable v-model="formInline.type" placeholder="请输入操作类型"></el-input>
            </el-form-item>
            <el-form-item label="起始时间" label-width="70px" prop="source">
                <div class="block">
                    <el-date-picker
                            v-model="formInline.beginTime"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="结束时间" label-width="70px" prop="source">
                <div class="block">
                    <el-date-picker
                            v-model="formInline.endTime"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </div>
            </el-form-item>

            <el-form-item style="margin-left: 10px">
                <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
                <el-button @click="selectLog" type="primary" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData">
            <el-table-column :label="item.propName" :property="item.prop" v-for="(item) in tableColumnList"
                             :key="item.prop">
                <template slot-scope="scope">
                    {{scope.row[scope.column.property]}}
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="showMore(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="[6, 10, 20, 40]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog
                title="日志"
                :visible.sync="dialogVisible"
                v-if="dialogVisible"
                width="30%">
            <el-descriptions direction="vertical" :column="4" border>
                <el-descriptions-item label="操作人员">{{currentRowData.operUserName}}</el-descriptions-item>
                <el-descriptions-item label="操作模块">{{currentRowData.operModul}}</el-descriptions-item>
                <el-descriptions-item label="操作描述" :span="2">{{currentRowData.operDesc}}</el-descriptions-item>
                <el-descriptions-item label="操作类型">
                    <el-tag size="small">{{currentRowData.operType}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="操作IP">{{currentRowData.operIp}}</el-descriptions-item>
                <el-descriptions-item :span="2" label="操作方法">{{currentRowData.operMethod}}</el-descriptions-item>
                <el-descriptions-item :span="8" label="操作URL">{{currentRowData.operUrl}}</el-descriptions-item>
                <el-descriptions-item :span="8" label="请求参数">{{currentRowData.operRequParam}}</el-descriptions-item>
                <el-descriptions-item :span="8" label="返回参数">{{currentRowData.operRespParam}}</el-descriptions-item>
                <el-descriptions-item :span="8" label="操作时间">{{currentRowData.operCreateTime}}</el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "LogManage",
        data() {
            return {
                current: 1, //当前页
                total: null, //记录条数
                size: 6, //每页条数
                currentRowData: {
                    // "operId": "",
                    // "operModul": "",
                    // "operType": "",
                    // "operDesc": "",
                    // "operRequParam": "",
                    // "operRespParam": "",
                    // "operUserId": "",
                    // "operUserName": "",
                    // "operMethod": "",
                    // "operUrl": "",
                    // "operIp": "",
                    // "operCreateTime": "",
                    // "operVer": ""
                }, //记录当前行的信息
                dialogVisible: false,
                tableColumnList:
                    [
                        {prop: 'operId', propName: 'id'},
                        {prop: 'operModul', propName: '操作模块'},
                        {prop: 'operType', propName: '操作类型'},
                        {prop: 'operDesc', propName: '操作描述'},
                        {prop: 'operRequParam', propName: '请求参数'},
                        {prop: 'operRespParam', propName: '返回参数'},
                        {prop: 'operUserId', propName: '操作人id'},
                        {prop: 'operUserName', propName: '操作人员'},
                        {prop: 'operMethod', propName: '操作方法'},
                        {prop: 'operUrl', propName: '请求URL'},
                        {prop: 'operIp', propName: '请求IP地址'},
                        {prop: 'operCreateTime', propName: '操作时间'},
                        {prop: 'operVer', propName: '版本'},
                    ],
                tableData: [
                    {
                        "operId": "1486009888286896130",
                        "operModul": "考试管理-散点图查询",
                        "operType": "添加",
                        "operDesc": "散点图查找功能",
                        "operRequParam": "{}",
                        "operRespParam": "{\"code\":200,\"data\":[],\"message\":\"成功\"}",
                        "operUserId": "201919244322",
                        "operUserName": "孔铭",
                        "operMethod": "com.blacktry.controller.ExamManageController.selectByExamId",
                        "operUrl": "/exam/selectViewByExamId/20190001",
                        "operIp": "127.0.0.1",
                        "operCreateTime": "2022-01-25T16:15:41.000+00:00",
                        "operVer": "blackTry"
                    }
                ],
                formInline: { // 条件查询
                    "username": null,
                    "type": null,
                    "beginTime": null,
                    "endTime": null,
                },
            }
        },
        mounted() {
            this.selectLog();
        },
        methods: {
            showMore(row) {
                this.currentRowData = row;
                this.dialogVisible = true;
            },
            reset() {
                this.formInline.username = null;
                this.formInline.type = null;
                this.formInline.beginTime = null;
                this.formInline.endTime = null;
                this.selectLog();
            },
            selectLog() {
                if(this.formInline.beginTime!=null){
                    this.formInline.beginTime = this.getDate(this.formInline.beginTime)
                }
                if(this.formInline.endTime!=null){
                    this.formInline.endTime = this.getDate(this.formInline.endTime)
                }
                this.postRequest('/operation-log/selectOperationLog/' + this.current + '/' + this.size, this.formInline).then(resp => {
                    if (resp) {
                        this.tableData = resp.data.records;
                        this.total = resp.data.total;
                    }
                })
            },
            getDate(date) {
                const dd = new Date(date)
                const y = dd.getFullYear()
                const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
                const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
                const h = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours() //获取当前小时，小于10补0
                const mi = dd.getMinutes() < 10 ? '0' + dd.getMinutes() : dd.getMinutes() //获取当前分钟数，不足10补0
                const ss = dd.getSeconds() < 10 ? '0' + dd.getSeconds() : dd.getSeconds() //获取当前秒数，不足10补0
                return y + '-' + m + '-' + d + ' ' + h + ':' + mi + ':' + ss;
            },
            // 分页改变每页数量
            handleSizeChange(size) {
                this.size = size;
                this.select();
            },
            // 分页改变当前页数
            handleCurrentChange(current) {
                this.current = current;
                this.select();
            },
            //跳转到试卷详情页
            toPaperInfo(id) {
                this.$router.push({path: '/student/studentExamInfo', query: {id: id}})
            }
        }
    }
</script>

<style scoped>

</style>